<template>
	<div class="good-list">
		<!-- 第一种方式 -->
<!-- 		<router-link class="good-item" v-for="item in goodlist" :key="item.id" :to="'/home/goodsInfo/'+item.id" tag="div">
			<img :src="item.img_url">
			<h1 class="title">{{item.title}}</h1>
				<div class="info">
					<p class="price">
						<span class="now">￥{{item.sell_price}}</span>
						<span class="old">￥{{item.market_price}}</span>
					</p>
					<p class="sell">
						<span>热卖中</span>
						<span>剩{{item.stock_quantity}}件</span>
					</p>
				</div>
		</router-link>
		<mt-button size="large" type="danger" @click="getMore">加载更多</mt-button> -->
		
		<!-- 第二中方式定义链接 -->
		<div class="good-item" v-for="item in goodlist" :key="item.id"  @click="getUrl(item.id)">
			<img :src="item.img_url">
			<h1 class="title">{{item.title}}</h1>
				<div class="info">
					<p class="price">
						<span class="now">￥{{item.sell_price}}</span>
						<span class="old">￥{{item.market_price}}</span>
					</p>
					<p class="sell">
						<span>热卖中</span>
						<span>剩{{item.stock_quantity}}件</span>
					</p>
				</div>
		</div>
		<mt-button size="large" type="danger" @click="getMore">加载更多</mt-button>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				goodlist:[],
				pageindex:1
			}
	},
		created(){
			this.getGoodList()
		},
		methods:{
			getGoodList(){
				this.$http.get("api/getgoods?pageindex="+this.pageindex).then(result =>{
					if(result.body.status === 0){
						this.goodlist = this.goodlist.concat(result.body.message)
					}
				})
			},
			getMore(){
				this.pageindex++
				this.getGoodList()
			},
			getUrl(id){
				
				//使用js的形式进行导航
				// 区分this.$route 和 this.$router这两个对象的区别
				//this.$route 是路由参数对象，所有路由中的参数 params,query都属于
				//this.$router是一个路由导航对象,用它可以方便使用js代码 实现路由的前进后退 跳转到新的URl地址
				/* this.$router.push("/home/goodInfo/"+id); */
				
				this.$router.push({path:"/home/goodInfo/"+id})
				
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.good-list{
		display: flex;
		flex-wrap: wrap;
		padding: 7px;
		justify-content: space-between;
		.good-item{
			width: 49%;
			border: 1px solid #ccc;
			box-shadow: 0 0 8px #ccc;
			margin: 4px 0;
			padding: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 293px;
			img{
				width: 100%;
			}
			.title{
				font-size: 14px;
			}
			.info{
				background-color: #eee;
				p{
					margin: 0;
					padding: 5px;
				}
				.price{
					.now{
						color: red;
						font-weight: bold;
						font-size: 16px;
					}
					.old{
						text-decoration: line-through;
						font-size: 12px;
						margin-left: 10px;
					}
				}
				.sell{
					display: flex;
					justify-content: space-between;
					font-size: 13px;
				}
			}
		}
	}
	
</style>
